<template>
    <div>
        <Row>
            <div style="float:left;margin:5px"  >
                <Button type="primary" @click="btn_add_menu">新增菜单</Button>  
            </div>
            <div style="margin-top:5px;">
                <div style="width:200px; float:left;">
                    <Form ref="select">
                        <Form-Item  prop="selectContent" >
                            <Input v-model="selectContent" placeholder="输入查询内容" @on-change="btn_select_menu" />
                        </Form-Item>
                    </Form> 
                </div>
                <div>
                    <Button type="error" style="margin-bottom: 5px ;margin-right:5px;margin-left: 5px;"  @click="btn_select_menu">查询</Button>
                </div>
            </div>
        </Row>
        <i-table border stripe  :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_menu(index)">编辑</Button>
                <Button type="error" style="margin-bottom: 5px ;margin-right:5px"  @click="del_menu(index)">删除</Button>
            </template>
        </i-table >
    
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 新增菜单模态框 -->
        <Modal v-model="show_add_menu_modal" width="600" draggable >
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加菜单</span>
            </p>
            <div >
                <Form ref="menu" :model="menu" :rules="menu_rules" label-position="left"  :label-width="100">
                    <Form-Item label="名字:"  prop="name">
                        <Input type="text"  v-model="menu.name" />
                    </Form-Item> 
                    <Form-Item label="新菜单ID:"  prop="menu_id">
                        <Input type="number"  v-model="menu.menu_id" />
                    </Form-Item> 
                    <Form-Item label="父菜单ID:"  prop="parent_id">
                        <Input type="number"  v-model="menu.parent_id"  @on-change="change_parent_id" />
                    </Form-Item> 
                    <Form-Item label="父菜单:"  prop="parent">
                        <Input type="text"   v-model="menu.parent" disabled />
                    </Form-Item> 
                    <Form-Item label="图标:"  prop="icon">
                        <Input type="text"  v-model="menu.icon" />
                    </Form-Item> 
                    <Form-Item label="路由名称(to):"  prop="route_name">
                            <Input type="text"  v-model="menu.route_name" />
                    </Form-Item> 
                    <Form-Item label="路由地址:"  prop="route_path">
                        <Input type="text"  v-model="menu.route_path" />
                    </Form-Item> 
                    <Form-Item label="api地址:"  prop="api">
                        <Input type="text"  v-model="menu.api" />
                    </Form-Item> 
                    <Form-Item label="标签:"  prop="tag">
                        <Select v-model="menu.tag">
                            <Option value="一级菜单">一级菜单</Option>
                            <Option value="二级菜单" >二级菜单</Option>
                            <Option value="三级菜单">三级菜单</Option>
                        </Select>
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <!-- menu是 ref的值 -->
                <Button type="primary" size="large"  @click="submit_add_menu('menu')">提交</Button>
            </div>
        </Modal>

        <!-- 编辑菜单模态框 -->
        <Modal v-model="show_edit_menu_modal" width="800" draggable>
            <p slot="header" style="color:#f60;text-align:center">
              {{menu_edit.parent_id}} <span>编辑菜单</span>
            </p>
            <div >
                <Form ref="menu_edit" :model="menu_edit" :rules="menu_rules" label-position="left"  :label-width="100">
                    <Form-Item label="名字:"  prop="name">
                        <Input type="text"  v-model="menu_edit.name" />
                    </Form-Item> 
                    <Form-Item label="新菜单ID:"  prop="menu_id">
                        <Input type="number"  v-model="menu_edit.menu_id" />
                    </Form-Item>  
                    <Form-Item label="父菜单ID:"  prop="parent_id">
                        <Input type="number"  v-model="menu_edit.parent_id"  @on-change="change_edit_parent_id" />
                    </Form-Item> 
                    <Form-Item label="父菜单:"  prop="parent">
                        <Input type="text"   v-model="menu_edit.parent" disabled />
                    </Form-Item> 
                    <Form-Item label="图标:"  prop="icon">
                        <Input type="text"  v-model="menu_edit.icon" />
                    </Form-Item> 
                    <Form-Item label="路由名称(to):"  prop="route_name">
                            <Input type="text"  v-model="menu_edit.route_name" />
                    </Form-Item> 
                    <Form-Item label="路由地址:"  prop="route_path">
                        <Input type="text"  v-model="menu_edit.route_path" />
                    </Form-Item> 
                    <Form-Item label="api地址:"  prop="api">
                        <Input type="text"  v-model="menu_edit.api" />
                    </Form-Item> 
                    <Form-Item label="标签" prop="tag">
                        <Select v-model="menu_edit.tag">
                            <template v-for="tag in tag_list" >
                                <Option  :key="tag" :value="tag" v-if="tag === menu_edit.tag"  selected>{{ tag }}</Option>
                                <Option :key="tag" :value="tag" v-else>{{ tag }} </Option>
                            </template>
                         </Select>
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_edit_menu('menu_edit')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { post } from  '@/api/http'
// menu_update,menu_delete,
import { show_simple_page } from '@/common/util'
import { get_menu_list,
        menu_add,
        menu_delete,
        get_menu_name,
        get_new_menu_id,
        menu_select,
        menu_update,
} from  '@/api'


export default {
    data() {
        const validateNumber = (rule,value,callback) => {
            console.log(typeof value)
            if(!(/(^[0-9]\d*$)/.test(value))) {
                callback(new Error('请输入数字'))
            }else{
                callback();
            }
        };
        return {
            format: [
                {
                    title: '菜单Id',key: 'menu_id'
                },
                {
                    title: '菜单名称',key: 'name'
                },
                {
                    title: '父菜单',key: 'parent'
                },
                {
                    title: '图标',key: 'icon'
                },
                {
                    title: '路由名称',key: 'route_name'
                },
                {
                    title: '路由地址',key: 'route_path'
                },
                {
                    title: '标签',key: 'tag'
                },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            // 新增站点绑定
            menu: {
                name: '',
                menu_id: 0,
                parent_id: 0,
                parent:'',
                icon: '',
                route_name: '',
                route_path: '',
                api: '',
                tag: ''
            },
            // 编辑站点
            menu_edit: {
                name: '',
                menu_id: 0,
                parent_id: 0,
                parent:'',
                icon: '',
                route_name: '',
                route_path: '',
                api: '',
                tag: ''
            },
            show_edit_menu_modal:false,
            // 环境列表
            env_list: [],
            tag_list: ['一级菜单','二级菜单','三级菜单'],
            menu_rules: {
                name:[
                    {required: true,message:"请输入站点名称",trigger: 'blur'},
                ],
                parent_id:[
                    { validator: validateNumber,trigger: 'blur'},
                ],
                tag:[
                    {required: true,message:"请选择tag",trigger: 'blur'},
                ],
            },
            // 新增菜单
            show_add_menu_modal: false,
            // 查询
            selectContent: '',

            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,


        }
    },
    methods: {
        // 提交编辑菜单
        async submit_edit_menu(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return

            let data = {'menu':this.menu_edit}
            post(menu_update,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_menu_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })

        },
        // 点击编辑事件
        btn_edit_menu(index){
            // this.get_env()
            let menu =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.menu_edit = menu
            setTimeout(() =>{
                this.show_edit_menu_modal=true
            },200); 
        },
        btn_select_menu(){
            let selectContent = this.selectContent
            if(selectContent =='' || selectContent==null) {
                this.refresh()
                return
            }
            let data = JSON.stringify({"selectContent":selectContent})

            post(menu_select,data).then( (response) => {
                show_simple_page(this,response)
            })

        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        // 父id改变事件
        change_parent_id(){
            let id = parseInt(this.menu.parent_id)
            let data = {"id":id}
            post(get_menu_name,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('fail') != -1) {
                    this.$Message.error("查无此菜单")
                }else {
                    this.menu.parent = response.data
                }
            })
        },
        // 父id改变事件
        change_edit_parent_id(){
            let id = parseInt(this.menu_edit.parent_id)
            let data = {"id":id}
            post(get_menu_name,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('fail') != -1) {
                    this.$Message.error("查无此菜单")
                }else {
                    this.menu_edit.parent = response.data
                }
            })
        },
        del_menu(index){
            let id = this.show_list[index].id
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let data = {"id":id}
            post(menu_delete,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除'+name+'成功')
                    this.refresh()
                }else {
                    alert("删除失败:",info)
                }
            })

        },
        // 获取新菜单Id
        menu_id(){
            post(get_new_menu_id).then(response=>{
                this.menu.menu_id = response.data.menu_id
            })
        },
        btn_add_menu(){
            this.menu_id()
            setTimeout(() =>{
                this.show_add_menu_modal = true
            },200); 
            
        },
        submit_add_menu(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return

            let data = {'menu':this.menu}
            post(menu_add,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_menu_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:",info)
                }
            })

        },
        refresh() {
            post(get_menu_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    // 修改改数据之后显示回到第一页的bug，改为停留在当前页
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>